<template>
	<div>
		<header class="aui-header">
			<router-link class="aui-pull-left aui-btn" to="/receaddress">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</router-link>
			<div class="aui-title">新建地址</div>
		</header>
		<div class="newaddressmain">
			<ul class="newsaddlist">
				<li class="sameaddlistli">
					<input type="text" class="sameinput" placeholder="收货人" ref="name">
					<i class="rightbut"></i>
				</li>
				<li class="sameaddlistli">
					<input type="text" class="sameinput" placeholder="联系电话" ref="phone" maxlength="11">
					<i class="rightbut"></i>
				</li>
				<li class="sameaddlistli">
					<span class="sameinput" @click="areabut">{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</span>
					<i class="rightbut"></i>
				</li>

				<li class="sameaddlistli">
					<textarea class="moreaddress" ref="moreaddress" placeholder="请填写详细地址，不少于5个字"></textarea>
				</li>

				<li class="sameaddlistli">
					<span class="defalutfont">设置默认地址</span>
					<mt-switch v-model="value" @click="change"></mt-switch>
				</li>
			</ul>
			<div class="surebut" @click="surebutton()">保存</div>
		</div>
		<div class="mask" v-show="maskcon">
			<div class="maskarea"></div>
			<mt-picker class="areainfo" :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
			<div class="maskbutcon">
				<div class="cancelbut" @click="cancelbut">取消</div>
				<div class="masksurebut" @click="surebut">确定</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Picker } from 'mint-ui';
	import myaddress from '../address/address3.json'
	export default {
		data() {
			return {
				toggle: true,
				successlist: [],
				myAddressSlots: [{
						flex: 1,
						defaultIndex: 1,
						values: Object.keys(myaddress), //省份数组
						className: 'slot1',
						textAlign: 'center'
					}, {
						divider: true,
						content: '-',
						className: 'slot2'
					}, {
						flex: 1,
						values: [],
						className: 'slot3',
						textAlign: 'center'
					},
					{
						divider: true,
						content: '-',
						className: 'slot4'
					},
					{
						flex: 1,
						values: [],
						className: 'slot5',
						textAlign: 'center'
					}
				],
				myAddressProvince: '省',
				myAddressCity: '市',
				myAddresscounty: '区/县',
				maskcon: false,
				token:''
			}
		},
		components: {
			'mt-picker': Picker,

		},
		created() {
			this.token = localStorage.getItem('token');
		},
		methods: {
			onMyAddressChange(picker, values) {
				if(myaddress[values[0]]) { //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
					picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
					picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
					this.myAddressProvince = values[0];
					this.myAddressCity = values[1];
					this.myAddresscounty = values[2];
				}
			},
			surebutton: function() {
				var name = this.$refs.name.value;
				var phone = this.$refs.phone.value;
				var addressarea = this.myAddressProvince + this.myAddressCity + this.myAddresscounty;
				var moreaddress = this.$refs.moreaddress.value;
				var smallurl = 'receiverName=' + name + '&receiverPhone=' + phone + '&city=' + addressarea + '&detail=' + moreaddress;
			//	alert(smallurl);
				var url = BaseUrl+'users/address/add?token='+this.token+'&appId=gzh&' + smallurl+'&isdefault=0';
				this.$http.post(url).then(res => {
					this.successlist = res
					this.$router.go(-1);
					//console.log(res.data.data);
				})
			},
			areabut: function() {

				this.maskcon = true;
			},
			cancelbut: function() {
				this.maskcon = false;
			},
			surebut: function() {
				this.maskcon = false;
			}
		},
		mounted() {
			this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
				this.myAddressSlots[0].defaultIndex = 0
				// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
				//因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
			});
		}
	}
</script>

<style scoped="scoped">
	/******新建地址*******/
	
	.newaddressmain {
		padding: 0 0.25rem;
		margin-top: 1rem;
		background-color: #FFFFFF;
		height: 100%;
	}
	
	.newsaddlist {
		width: 100%;
	}
	
	.sameaddlistli {
		width: 100%;
		border-bottom: solid 0.01rem #CCCCCC;
		margin-bottom: 0.01rem;
	}
	
	.sameaddlistli:nth-child(5) {
		border-bottom: 0rem;
	}
	
	.sameaddlistli:nth-child(4) {
		border-bottom: 0rem;
	}
	
	.sameinput {
		width: 90%;
		height: 0.8rem;
		outline: none;
		display: inline-block;
		line-height: 0.8rem;
		color: #323232;
		background: none;
	}
	
	.rightbut {
		width: 0.15rem;
		height: 0.28rem;
		background: url(../assets/return.png);
		display: inline-block;
		float: right;
		margin-top: 0.24rem;
		background-size: 100%;
	}
	
	.mu-switch {
		float: right;
		margin-top: 0.1rem;
	}
	
	.defalutfont {
		margin-top: 0.2rem;
		display: inline-block;
		color: #b5b5b5;
	}
	
	.moreaddress {
		width: 100%;
		height: 2.28rem;
		border: solid 0.01rem #CCCCCC;
		outline: none;
		margin-top: 0.2rem;
	}
	/******保存*******/
	
	.surebut {
		width: 93%;
		height: 0.8rem;
		line-height: 0.8rem;
		text-align: center;
		font-size: 0.28rem;
		color: #FFFFFF;
		margin: 0 auto;
		background-color: #FF2040;
		border-radius: 0.3rem;
		margin-top: 0.4rem;
		margin-bottom: 2rem;
	}
	
	.mint-switch {
		float: right;
		margin-top: 0.1rem;
	}
</style>